<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <link rel="icon" href="favicon.ico" />
    <title>vis.js - Interaction documentation.</title>

    <!-- Bootstrap core CSS -->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <!-- Tipue vendor css -->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch.css"
      rel="stylesheet"
    />

    <link href="../../common-docs-files/css/style.css" rel="stylesheet" />
    <link href="../css/overrides.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css"
      type="text/css"
      rel="stylesheet"
    />
    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"
    ></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/12.1.5/js/smooth-scroll.min.js"></script>
    <script language="JavaScript">
      smoothScroll.init();
    </script>

    <script
      type="text/javascript"
      src="../../common-docs-files/js/toggleTable.js"
    ></script>
  </head>
  <body onload="prettyPrint();">
    <div class="navbar-wrapper">
      <div class="container">
        <nav class="navbar-inverse navbar-static-top" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <button
                type="button"
                class="navbar-toggle collapsed"
                data-toggle="collapse"
                data-target="#navbar"
                aria-expanded="false"
                aria-controls="navbar"
              >
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav"></ul>
              <form class="navbar-form navbar-right" role="search">
                <input
                  name="q"
                  id="tipue_search_input"
                  autocomplete="off"
                  type="text"
                  class="form-control"
                  placeholder="Enter keywords"
                />
                <button
                  type="button"
                  class="btn btn-default"
                  onclick="vis.initSiteSearch(true);"
                >
                  Go!
                </button>
              </form>
              <div id="search-results-wrapper" class="panel panel-default">
                <div class="panel-body">
                  <div id="tipue_search_content"></div>
                </div>
              </div>
              <div id="keyword-info" class="panel panel-success">
                <div class="panel-body">
                  Found <span id="keyword-count"></span> results. Click
                  <a id="keyword-jumper-button" href="">here</a> to jump to the
                  first keyword occurence!
                </div>
              </div>
            </div>
          </div>
        </nav>
      </div>
    </div>

    <div class="container full">
      <h1>Network - interaction</h1>
      <p>
        Used for all user interaction with the network. Handles mouse and touch
        events as well as the navigation buttons and the popups.
      </p>
      <h3>Options</h3>
      <p>
        The options for the interaction module have to be contained in an object
        titled 'interaction'.
      </p>
      <p>
        Click on the full options or shorthand options to show how these options
        are supposed to be used.
      </p>
      <ul class="nav nav-tabs">
        <li role="presentation" class="active" onclick="toggleTab(this)">
          <a href="#">options hidden</a>
        </li>
        <li
          role="presentation"
          onclick="toggleTab(this);"
          targetNode="fullOptions"
        >
          <a href="#">full options</a>
        </li>
        <li
          role="presentation"
          onclick="toggleTab(this);"
          targetNode="shortOptions"
        >
          <a href="#">shorthand options</a>
        </li>
      </ul>
      <br />
      <pre class="prettyprint lang-js options top hidden" id="fullOptions">
// these are all options in full.
var options = {
  interaction:{
    dragNodes:true,
    dragView: true,
    hideEdgesOnDrag: false,
    hideEdgesOnZoom: false,
    hideNodesOnDrag: false,
    hover: false,
    hoverConnectedEdges: true,
    keyboard: {
      enabled: false,
      speed: {x: 10, y: 10, zoom: 0.02},
      bindToWindow: true,
      autoFocus: true,
    },
    multiselect: false,
    navigationButtons: false,
    selectable: true,
    selectConnectedEdges: true,
    tooltipDelay: 300,
    zoomSpeed: 1,
    zoomView: true
  }
}

network.setOptions(options);
</pre
      >

      <pre class="prettyprint lang-js options top hidden" id="shortOptions">
// only the options that have shorthand notations are shown.
var options = {
  interaction:{
    keyboard: false
  }
}

network.setOptions(options);
</pre
      >

      <p>
        This is a list of all the methods in the public API. They are collected
        here from all individual modules.
      </p>
      <table class="options" id="optionTable">
        <tr>
          <th>Name</th>
          <th>Type</th>
          <th>Default</th>
          <th>Description</th>
        </tr>
        <tr>
          <td>dragNodes</td>
          <td>Boolean</td>
          <td><code>true</code></td>
          <td>
            When true, the nodes that are not fixed can be dragged by the user.
          </td>
        </tr>
        <tr>
          <td>dragView</td>
          <td>Boolean</td>
          <td><code>true</code></td>
          <td>When true, the view can be dragged around by the user.</td>
        </tr>
        <tr>
          <td>hideEdgesOnDrag</td>
          <td>Boolean</td>
          <td><code>false</code></td>
          <td>
            When true, the edges are not drawn when dragging the view. This can
            greatly speed up responsiveness on dragging, improving user
            experience.
          </td>
        </tr>
        <tr>
          <td>hideEdgesOnZoom</td>
          <td>Boolean</td>
          <td><code>false</code></td>
          <td>
            When true, the edges are not drawn when zooming the view. This can
            greatly speed up responsiveness on zooming, improving user
            experience.
          </td>
        </tr>
        <tr>
          <td>hideNodesOnDrag</td>
          <td>Boolean</td>
          <td><code>false</code></td>
          <td>
            When true, the nodes are not drawn when dragging the view. This can
            greatly speed up responsiveness on dragging, improving user
            experience.
          </td>
        </tr>
        <tr>
          <td>hover</td>
          <td>Boolean</td>
          <td><code>false</code></td>
          <td>
            When true, the nodes use their hover colors when the mouse moves
            over them.
          </td>
        </tr>
        <tr>
          <td>hoverConnectedEdges</td>
          <td>Boolean</td>
          <td><code>true</code></td>
          <td>
            When true, on hovering over a node, it's connecting edges are
            highlighted.
          </td>
        </tr>
        <tr
          class="toggle collapsible"
          onclick="toggleTable('optionTable','keyboard', this);"
        >
          <td><span parent="keyboard" class="right-caret"></span> keyboard</td>
          <td>Object or Boolean</td>
          <td><code>Object</code></td>
          <td>
            When true, the keyboard shortcuts are enabled with the default
            settings. For further customization, you can supply an object.
          </td>
        </tr>
        <tr parent="keyboard" class="hidden">
          <td class="indent">keyboard.enabled</td>
          <td>Boolean</td>
          <td><code>false</code></td>
          <td>
            Toggle the usage of the keyboard shortcuts. If this option is not
            defined, it is set to true if any of the properties in this object
            are defined.
          </td>
        </tr>
        <tr parent="keyboard" class="hidden">
          <td class="indent">keyboard.speed.x</td>
          <td>Number</td>
          <td><code>1</code></td>
          <td>
            The speed at which the view moves in the x direction on pressing a
            key or pressing a navigation button.
          </td>
        </tr>
        <tr parent="keyboard" class="hidden">
          <td class="indent">keyboard.speed.y</td>
          <td>Number</td>
          <td><code>1</code></td>
          <td>
            The speed at which the view moves in the y direction on pressing a
            key or pressing a navigation button.
          </td>
        </tr>
        <tr parent="keyboard" class="hidden">
          <td class="indent">keyboard.speed.zoom</td>
          <td>Number</td>
          <td><code>0.02</code></td>
          <td>
            The speed at which the view zooms in or out pressing a key or
            pressing a navigation button.
          </td>
        </tr>
        <tr parent="keyboard" class="hidden">
          <td class="indent">keyboard.bindToWindow</td>
          <td>Boolean</td>
          <td><code>true</code></td>
          <td>
            When binding the keyboard shortcuts to the window, they will work
            regardless of which DOM object has the focus. If you have multiple
            networks on your page, you could set this to false, making sure the
            keyboard shortcuts only work on the network that has the focus.
          </td>
        </tr>
        <tr parent="keyboard" class="hidden">
          <td class="indent">keyboard.autoFocus</td>
          <td>Boolean</td>
          <td><code>true</code></td>
          <td>
            When <code>keyboard.bindToWindow=false</code> this option allows you
            to skip auto focusing the network on hover.
          </td>
        </tr>
        <tr>
          <td>multiselect</td>
          <td>Boolean</td>
          <td><code>false</code></td>
          <td>
            When true, a longheld click (or touch) as well as a control-click
            will add to the selection.
          </td>
        </tr>
        <tr>
          <td>navigationButtons</td>
          <td>Boolean</td>
          <td><code>false</code></td>
          <td>
            When true, navigation buttons are drawn on the network canvas. These
            are HTML buttons and can be completely customized using CSS.
          </td>
        </tr>
        <tr>
          <td>selectable</td>
          <td>Boolean</td>
          <td><code>true</code></td>
          <td>When true, the nodes and edges can be selected by the user.</td>
        </tr>
        <tr>
          <td>selectConnectedEdges</td>
          <td>Boolean</td>
          <td><code>true</code></td>
          <td>
            When true, on selecting a node, its connecting edges are
            highlighted.
          </td>
        </tr>
        <tr>
          <td>tooltipDelay</td>
          <td>Number</td>
          <td><code>300</code></td>
          <td>
            When nodes or edges have a defined <code>'title'</code> field, this
            can be shown as a pop-up tooltip. The tooltip itself is an HTML
            element that can be fully styled using CSS. The delay is the amount
            of time in milliseconds it takes before the tooltip is shown.
          </td>
        </tr>
        <tr>
          <td>zoomSpeed</td>
          <td>Number</td>
          <td><code>1</code></td>
          <td>How fast/rough or slow/precise zooming is.</td>
        </tr>
        <tr>
          <td>zoomView</td>
          <td>Boolean</td>
          <td><code>true</code></td>
          <td>When true, the user can zoom in.</td>
        </tr>
      </table>

      <div class="flagbar">
        <a href="../../docs/network/interaction.html" title="English"
          ><span class="flag en"></span
        ></a>
        <a href="../../docs-kr/network/interaction.html" title="Korean"
          ><span class="flag kr"></span
        ></a>

        <br />

        Third party docs:
        <a href="https://ame.cool/core/frontend-tools/" title="Chinese"
          ><span class="flag zh"></span
        ></a>
      </div>
    </div>

    <!-- Bootstrap core JavaScript
================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../common-docs-files/js/ie10-viewport-bug-workaround.js"></script>
    <!-- jquery extensions -->
    <script src="../../common-docs-files/js/jquery.highlight.js"></script>
    <script src="../../common-docs-files/js/jquery.url.min.js"></script>
    <!-- Tipue vendor js -->
    <script src="../../common-docs-files/js/tipuesearch.config.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch.min.js"></script>
    <!-- controller -->
    <script src="../../common-docs-files/js/main.js"></script>
  </body>
</html>
